<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>尚品汇 商品详情</title>
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <div class="top-bar">
        <div class="container">
            <div class="left-part">
                <span>欢迎来到尚品汇！ 请</span>
                <a href="javascript:;">登录</a>
                <a href="javascript:;">免费注册</a>
            </div>
            <nav class="right-part">
                <a href="javascript:;">我的订单</a>
                <a href="javascript:;">我的购物车</a>
                <a href="javascript:;">我的尚品汇</a>
                <a href="javascript:;">尚品汇会员</a>
                <a href="javascript:;">企业采购</a>
                <a href="javascript:;">关注尚品汇</a>
                <a href="javascript:;">合作招商</a>
                <a href="javascript:;">商家后台</a>
            </nav>
        </div>
    </div>
    <header>
        <div class="container">
            <div class="logo">
                <img src="./images/Logo.png" alt="">
            </div>
            <form action="" class="searchbox">
                <input type="text">
                <button type="submit">搜索</button>
            </form>
        </div>
    </header>
    <div class="navbar">
        <div class="container">
            <div class="allgoods">全部商品分类</div>
            <ul class="nav">
                <li><a href="javascript:;">服装城</a></li>
                <li><a href="javascript:;">美妆馆</a></li>
                <li><a href="javascript:;">尚品汇超市</a></li>
                <li><a href="javascript:;">全球购</a></li>
                <li><a href="javascript:;">闪购</a></li>
                <li><a href="javascript:;">团购</a></li>
                <li><a href="javascript:;">有趣</a></li>
                <li><a href="javascript:;">秒杀</a></li>
            </ul>
        </div>
    </div>
    <div class="product">
        <div class="container">
            <!-- 面包屑导航 -->
            <div class="breadcrumb">
                <a href="javascript:;">手机、数码、通讯</a>
                <a href="javascript:;">手机</a>
                <a href="javascript:;">Apple苹果</a>
                <a href="javascript:;">iphone 6S系类</a>
            </div>
            <!-- 商品整体 -->
            <div class="product-intro">
                <!-- 左侧图片 -->
                <div class="preview">
                    <!-- 放大镜 -->
                    <div class="big-glass" id="smImgBox">
                        <img src="./images/s1.png" alt="iphone6s" id="smImg">
                        <div class="mask" id="mask"></div>
                    </div>
                    <!-- 右侧大图 -->
                    <div class="bigimg" id="bgImgBox">
                        <img src="./images/b1.png" alt="iphone6s" id="bgImg">
                    </div>
                    <!-- 缩略图 -->
                    <div class="thumbnail">
                        <span id="leftBtn">&lt;</span>
                        <div class="thumb-box" id="thumbBox">
                            <ul class="thumb-img" id="thumbImg">
                                <!-- <li><img src="./images/s1.png" alt="iphone6s"></li>
                                <li><img src="./images/s2.png" alt="iphone6s"></li>
                                <li><img src="./images/s3.png" alt="iphone6s"></li>
                                <li><img src="./images/s1.png" alt="iphone6s"></li>
                                <li><img src="./images/s2.png" alt="iphone6s"></li>
                                <li><img src="./images/s3.png" alt="iphone6s"></li>
                                <li><img src="./images/s1.png" alt="iphone6s"></li>
                                <li><img src="./images/s2.png" alt="iphone6s"></li>
                                <li><img src="./images/s3.png" alt="iphone6s"></li> -->
                            </ul>
                        </div>
                        <span id="rightBtn">&gt;</span>
                    </div>
                </div>
                <!-- 右侧价格 -->
                <div class="buy-goods">
                    <h3 id="goodTitle"></h3>
                    <p class="recommend" id="recommend"></p>
                    <div class="price-box">
                        <!-- 价格 -->
                        <div class="price">
                            <div class="property">价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</div>
                            <div class="priceValue">
                                <span class="yuan">￥</span>
                                <span class="money" id="money"></span>
                                <span class="info">降价通知</span>
                            </div>
                            <span class="comment" id="comment"></span>
                        </div>
                        <!-- 促销 -->
                        <div class="sale">
                            <div class="property">促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</div>
                            <div class="content" id="proContent">

                            </div>
                        </div>
                    </div>
                    <div class="support">
                        <div class="row">
                            <div class="product">支　持</div>
                            <p id="support"></p>
                        </div>
                        <div class="row">
                            <div class="product">配送至</div>
                            <p id="toAddress"></p>
                        </div>
                    </div>
                    <!-- 购买选项区域 -->
                    <div class="buy-bottom" id="buyBottom">
                        <div class="choose-area" id="chooseArea">
                            <!-- <span class="mark">银色<i>&times;</i></span>
                            <span class="mark">银色<i>&times;</i></span> -->
                        </div>
                        <!-- <dl>
                            <dt>选择颜色</dt>
                            <dd class="active">金色</dd>
                            <dd>金色</dd>
                        </dl>
                        <dl>
                            <dt>选择颜色</dt>
                            <dd>金色</dd>
                            <dd>金色</dd>
                        </dl>
                        <dl>
                            <dt>选择颜色</dt>
                            <dd>金色</dd>
                            <dd>金色</dd>
                        </dl>
                        <dl>
                            <dt>选择颜色</dt>
                            <dd>金色</dd>
                            <dd>金色</dd>
                        </dl> -->
                    </div>
                    <div class="shopCarBox">
                        <div class="numValue">
                            <input type="text" id="buyNum" value="1">
                            <button class="add" id="add">+</button>
                            <button class="reduce" id="reduce">-</button>
                        </div>
                        <a href="#" class="shopCar">加入购物车</a>
                    </div>
                </div>
            </div>
            <!-- 商品详情 -->
            <div class="product-details">
                <!-- 侧边栏 -->
                <aside class="asidebar">
                    <div class="aside-title" id="asideTitle">
                        <h4 class="active">相关分类</h4>
                        <h4>推荐品牌</h4>
                    </div>
                    <div class="aside-main" id="asideMain">
                        <div class="aside-content active">
                            <ul class="nav-list">
                                <li>手机</li>
                                <li>手机壳</li>
                                <li>内存卡</li>
                                <li>Iphone配件</li>
                                <li>贴膜</li>
                                <li>手机耳机</li>
                                <li>移动电源</li>
                                <li>平板电脑</li>
                            </ul>
                            <ul class="good-list">
                                <li>
                                    <img src="./images/part01.png" alt="充电宝">
                                    <p class="title">Apple苹果iPhone 6s (A1699)</p>
                                    <div class="price">
                                        ¥6088.00
                                    </div>
                                    <div class="shopcar">
                                        <a href="javascript:;">添加购物车</a>
                                    </div>
                                </li>
                                <li>
                                    <img src="./images/part02.png" alt="充电宝">
                                    <p class="title">Apple苹果iPhone 6s (A1699)</p>
                                    <div class="price">
                                        ¥6088.00
                                    </div>
                                    <div class="shopcar">
                                        <a href="javascript:;">添加购物车</a>
                                    </div>
                                </li>
                                <li>
                                    <img src="./images/part03.png" alt="充电宝">
                                    <p class="title">Apple苹果iPhone 6s (A1699)</p>
                                    <div class="price">
                                        ¥6088.00
                                    </div>
                                    <div class="shopcar">
                                        <a href="javascript:;">添加购物车</a>
                                    </div>
                                </li>
                                <li>
                                    <img src="./images/part01.png" alt="充电宝">
                                    <p class="title">Apple苹果iPhone 6s (A1699)</p>
                                    <div class="price">
                                        ¥6088.00
                                    </div>
                                    <div class="shopcar">
                                        <a href="javascript:;">添加购物车</a>
                                    </div>
                                </li>
                                <li>
                                    <img src="./images/part02.png" alt="充电宝">
                                    <p class="title">Apple苹果iPhone 6s (A1699)</p>
                                    <div class="price">
                                        ¥6088.00
                                    </div>
                                    <div class="shopcar">
                                        <a href="javascript:;">添加购物车</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="aside-content">
                            推荐品牌
                        </div>
                    </div>
                </aside>
                <!-- 详情介绍主体 -->
                <div class="details">
                    <!-- 加价购 -->
                    <div class="selection">
                        <h3>选择搭配</h3>
                        <div class="content">
                            <div class="main">
                                <img src="./images/l-m01.png" alt="">
                                <p class="main-price" id="mainPrice"></p>
                            </div>
                            <ul class="groups" id="groups">
                                <li>
                                    <img src="./images/dp01.png" alt="">
                                    <p>Feless费勒斯VR</p>
                                    <label><input type="checkbox" value="39">39</label>
                                </li>
                                <li>
                                    <img src="./images/dp02.png" alt="">
                                    <p>Feless费勒斯VR</p>
                                    <label><input type="checkbox" value="50">50</label>
                                </li>
                                <li>
                                    <img src="./images/dp03.png" alt="">
                                    <p>Feless费勒斯VR</p>
                                    <label><input type="checkbox" value="59">59</label>
                                </li>
                                <li>
                                    <img src="./images/dp04.png" alt="">
                                    <p>Feless费勒斯VR</p>
                                    <label><input type="checkbox" value="99">99</label>
                                </li>
                            </ul>
                            <div class="result">
                                <p class="goodsnum">已选购0件商品</p>
                                <span class="taocanjia">套餐价</span>
                                <p class="package-price" id="packagePrice">&yen;5299</p>
                                <a href="javascript:;">加入购物车</a>
                            </div>
                        </div>
                    </div>
                    <!-- 详情选项卡 -->
                    <div class="details-content">
                        <ul class="details-nav" id="detalisNav">
                            <li class="active">商品介绍</li>
                            <li>规格与包装</li>
                            <li>售后保障</li>
                            <li>商品评价</li>
                            <li>手机社区</li>
                        </ul>
                        <ul class="details-page " id="detailsPage">
                            <li class="active">
                                <ul class="tabContent">
                                    <li>分辨率：1920*1080(FHD)</li>
                                    <li>后置摄像头：1200万像素</li>
                                    <li>前置摄像头：500万像素</li>
                                    <li>核 数：其他</li>
                                    <li>频 率：以官网信息为准</li>
                                    <li>品牌： Apple</li>
                                    <li>商品名称：APPLEiPhone 6s Plus</li>
                                    <li>商品编号：1861098</li>
                                    <li>商品产地：中国大陆</li>
                                    <li>商品毛重：0.51kg</li>
                                    <li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li>
                                    <li>系统：苹果（IOS）</li>
                                    <li>像素：1000-1600万品毛重：0.51kg</li>
                                    <li>机身内存：64GB</li>
                                </ul>
                                <img src="./images/intro01.png" alt="">
                                <img src="./images/intro02.png" alt="">
                                <img src="./images/intro03.png" alt="">
                            </li>
                            <li>规格与包装</li>
                            <li>售后保障</li>
                            <li>商品评价</li>
                            <li>手机社区</li>

                        </ul>
                    </div>
                </div>
            </div>
            <!-- 猜你喜欢 -->
            <div class="you-like">
                <h3>猜你喜欢</h3>
                <ul class="like-goods">
                    <li>
                        <img src="./images/itemlike01.png" alt="">
                        <a href="jascript:;">DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</a>
                        <p class="price">&yen;3699.00</p>
                        <p class="comment">已有6人评价</p>
                    </li>
                    <li>
                        <img src="./images/itemlike02.png" alt="">
                        <a href="jascript:;">Apple苹果iPhone 6s/6s Plus 16G 64G 128G</a>
                        <p class="price">&yen;4699.00</p>
                        <p class="comment">已有6人评价</p>
                    </li>
                    <li>
                        <img src="./images/itemlike03.png" alt="">
                        <a href="jascript:;">DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</a>
                        <p class="price">&yen;2699.00</p>
                        <p class="comment">已有6人评价</p>
                    </li>
                    <li>
                        <img src="./images/itemlike04.png" alt="">
                        <a href="jascript:;">DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</a>
                        <p class="price">&yen;3699.00</p>
                        <p class="comment">已有6人评价</p>
                    </li>
                    <li>
                        <img src="./images/itemlike05.png" alt="">
                        <a href="jascript:;">DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</a>
                        <p class="price">&yen;3699.00</p>
                        <p class="comment">已有6人评价</p>
                    </li>
                    <li>
                        <img src="./images/itemlike06.png" alt="">
                        <a href="jascript:;">DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</a>
                        <p class="price">&yen;3699.00</p>
                        <p class="comment">已有6人评价</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="foot-nav">

                <dl>
                    <dt>购物指南</dt>
                    <dd>购物流程</dd>
                    <dd>会员介绍</dd>
                    <dd>生活旅行/团购</dd>
                    <dd>常见问题</dd>
                    <dd>购物指南</dd>
                </dl>
                <dl>
                    <dt>配送方式</dt>
                    <dd>211限时达</dd>
                    <dd>配送服务查询</dd>
                    <dd>配送费收取标准</dd>
                    <dd>上门自提</dd>
                    <dd>海外配送</dd>
                </dl>
                <dl>
                    <dt>支付方式</dt>
                    <dd>货到付款</dd>
                    <dd>在线支付</dd>
                    <dd>分期付款</dd>
                    <dd>邮局汇款</dd>
                    <dd>公司转账</dd>
                </dl>
                <dl>
                    <dt>售后服务</dt>
                    <dd>货到付款</dd>
                    <dd>在线支付</dd>
                    <dd>分期付款</dd>
                    <dd>邮局汇款</dd>
                    <dd>公司转账</dd>
                </dl>
                <dl>
                    <dt>特色服务</dt>
                    <dd>货到付款</dd>
                    <dd>在线支付</dd>
                    <dd>分期付款</dd>
                    <dd>邮局汇款</dd>
                    <dd>公司转账</dd>
                </dl>
                <dl>
                    <dt>帮助中心</dt>
                    <dd><img src="./images/wx_cz.jpg" alt=""></dd>
                    
                </dl>
            </div>
            <div class="footer-links">
                <a href="javascript:;">关于我们</a>
                <a href="javascript:;">联系我们</a>
                <a href="javascript:;">商家入驻</a>
                <a href="javascript:;">友情链接</a>
                <a href="javascript:;">关于我们</a>
                <a href="javascript:;">营销中心</a>
                <a href="javascript:;">友情链接</a>
                <a href="javascript:;">关于我们</a>
            </div>
            <div class="address">
                地址：北京市昌平区宏福科技园综合楼6层
            </div>
            <div class="icp">
                京ICP备19006430号
            </div>
        </div>
    </footer>
    <div class="body-aside">
        <div class="leftbox">
            <div class="topbtn">
                <img src="images/list.png" alt="">
            </div>
            <ul class="list">
                <li>
                    <div class="icon vip-icon"></div>
                    <div class="slidebox">商品会员</div>
                </li>
                <li>
                    <div class="icon shopcar-icon"></div>
                    <div class="slidebox">购物车</div>
                </li>
                <li>
                    <div class="icon follow-icon"></div>
                    <div class="slidebox">我的关注</div>
                </li>
                <li>
                    <div class="icon history-icon"></div>
                    <div class="slidebox">我的足迹</div>
                </li>
                <li>
                    <div class="icon message-icon"></div>
                    <div class="slidebox">我的消息</div>
                </li>
                <li>
                    <div class="icon question-icon"></div>
                    <div class="slidebox">咨询</div>
                </li>
            </ul>
            <div class="totop">
                <div class="icon top-icon"></div>
                <div class="slidebox">返回顶部</div>
            </div>
        </div>
        <div class="rightbox"></div>
    </div>    




    <script src="./js/data.js"></script>
    <script src="./js/index.js"></script>
</body>

</html>